<template>
    <!-- 
        使用echarts的步骤
        1、下载echarts依赖包: npm i echarts
        2、在template模板中准备一个div容器，该容器用来渲染echarts的图表
        3、导入echarts
        4、在mounted生命周期函数对echarts进行初始化
        5、编写echarts的选项(学习的核心)
        6、设置option
     -->
    <div style="width:350px;height:250px;border:1px solid #ccc;margin:10px" ref="main"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    mounted(){
        //使用init方法对echarts进行初始化,init方法的参数就是要渲染的DOM容器
        const myChart=echarts.init(this.$refs.main)
        //编写选项
        const options={
            //echats的数据集
            series:{
                type:'pie',//图表的类型
                roseType:true,
                data:[
                    {name:'微信支付',value:1000},
                    {name:'支付宝支付',value:800},
                    {name:'龙支付',value:500},
                    {name:'云闪付',value:350},
                    {name:'财付通',value:450}
                ]
            }
        }
        //设置options
        myChart.setOption(options)

    }
}
</script>

<style>

</style>